<template>
    <div class="app-container">
        <el-form class="lookForm" :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="140px">
            <el-form-item label="岗位名称" prop="postName">
                <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设岗部门" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入设岗部门" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="负责人姓名" prop="fzrName">
                <el-input v-model="queryParams.fzrName" placeholder="请输入负责人姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <!-- <el-form-item label="指导老师姓名" prop="zdlsName">
                <el-input v-model="queryParams.zdlsName" placeholder="请输入指导老师姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->

            <el-form-item label="校区" prop="campusName">
                <el-input v-model="queryParams.campusName" placeholder="请输入校区" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="工作地点" prop="workAddr">
                <el-input v-model="queryParams.workAddr" placeholder="请输入工作地点" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <span style="color:red">*只有当前学年通过困难认定才能申请岗位</span>
            </el-form-item>
        </el-form>
        <hr />

        <div class="container">
            <el-empty v-if="isEmpty(tableData)" description="暂无岗位"></el-empty>
            <div class="item" v-else :span="8" v-for="(v, i) in tableData" :key="i">
                <el-card style="margin: 10px;" shadow="hover">
                    <div slot="header">
                        <span>{{ v.postName }}</span>
                        <el-button @click="lookVClick(v)" style="float: right; padding: 3px 0"
                            type="text">查看/申请</el-button>
                    </div>
                    <div class="card-item">
                        校区:{{ v.campusName }}
                    </div>
                    <div class="card-item">
                        部门:{{ v.deptName }}
                    </div>
                    <!-- <div class="card-item">
                        指导老师:{{ v.zdlsName }}
                    </div> -->
                    <div class="card-item">
                        负责人:{{ v.fzrName }}
                    </div>
                    <div class="card-item">
                        工作地点:{{ v.workAddr }}
                    </div>
                    <div class="card-item">
                        岗位类型:{{ v.postType }}
                    </div>
                    <div class="card-item">
                        岗位职责:{{ v.workNeed }}
                    </div>
                    <div class="card-item">
                        技能要求:{{ v.skillNeed }}
                    </div>
                    <div class="card-item">
                        每周工作时长:{{ v.weekTime }} 小时
                    </div>
                    <div class="card-item">
                        招募/在岗学生:{{ v.postCount }}/{{ v.workStus }}
                    </div>
                </el-card>
            </div>
        </div>


        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />



        <el-dialog title="查看" :visible.sync="lookV" append-to-body fullscreen>
            <el-form class="lookForm" size="mini" ref="lookForm" label-width="148px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="岗位名称" prop="postName">
                            <el-input v-model="lookForm.postName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="设岗部门" prop="deptId">
                            <el-input v-model="lookForm.deptName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="设岗人数" prop="postCount">
                            <el-input v-model="lookForm.postCount" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="负责人" prop="fzrName">
                            <el-input v-model="lookForm.fzrName" readonly />
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="8">
                        <el-form-item label="指导老师" prop="zdlsName">
                            <el-input v-model="lookForm.zdlsName" readonly />
                        </el-form-item>
                    </el-col> -->

                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="zdlsPhone">
                            <el-input v-model="lookForm.zdlsPhone" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="付酬方式">
                            <el-input value="按小时" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="付酬标准">
                            <el-input value="15.00" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="预计金额(元/月/人)" prop="willMoney">
                            <el-input v-model="lookForm.willMoney" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="预计金额合计(元/月)" prop="willMoneyTotal">
                            <el-input readonly v-model="lookForm.willMoneyTotal" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="岗位职责" prop="workNeed">
                            <el-input type="textarea" v-model="lookForm.workNeed" readonly />
                        </el-form-item>
                    </el-col>


                    <el-col :span="24">
                        <el-form-item label="技能要求" prop="skillNeed">
                            <el-input type="textarea" v-model="lookForm.skillNeed" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="每周工作时长" prop="weekTime">
                            <el-input v-model="lookForm.weekTime" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="校区" prop="campusName">
                            <el-input v-model="lookForm.campusName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="工作地点" prop="workAddr">
                            <el-input v-model="lookForm.workAddr" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="岗位类型" prop="postType">
                            <el-input v-model="lookForm.postType" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="lookForm.remark" readonly />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <hr />
            <el-steps :active="getStep(lookForm)">
                <el-step title="部门制表人申请岗位" description=""></el-step>
                <el-step title="部门领导审批" :status="isEmpty(lookForm.deptCmt) ? 'wait' : getStepStatus(lookForm.deptCmt)"
                    :description="isEmpty(lookForm.deptCmt) ? '' : lookForm.deptCmt"></el-step>
                <el-step title="资助办领导审批" :status="isEmpty(lookForm.highCmt) ? 'wait' : getStepStatus(lookForm.highCmt)"
                    :description="isEmpty(lookForm.highCmt) ? '' : lookForm.highCmt"></el-step>
            </el-steps>
            <hr />
            <el-form class="lookForm" size="mini" ref="applyForm" label-width="148px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="指导老师" prop="fzrName">
                            <TeacherSelect :valueProps="{ value: 'employeeId', label: 'name' }"
                                v-model="applyForm.zdlsNo" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号">
                            <el-input :maxlength="100" v-model="applyForm.idCard" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="农行卡号">
                            <el-input :maxlength="100" v-model="applyForm.bankCard" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开户行">
                            <el-input :maxlength="100" v-model="applyForm.bankAddr" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="联系电话">
                            <el-input :maxlength="100" v-model="applyForm.stuPhone" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="课余时间(单位：小时)">
                            <el-input type="number" min="0" max="24" v-model="applyForm.canTime" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="家庭地址">
                            <el-input :maxlength="200" v-model="applyForm.familyAddr" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="宿舍">
                            <el-input :maxlength="100" v-model="applyForm.stuDorm" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="家庭经济情况">
                            <el-select v-model="applyForm.familyCondition">
                                <el-option :label="'特别困难'" :value="'特别困难'"></el-option>
                                <el-option :label="'比较困难'" :value="'比较困难'"></el-option>
                                <el-option :label="'一般困难'" :value="'一般困难'"></el-option>
                                <el-option :label="'不困难'" :value="'不困难'"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="曾获得资助">
                            <el-input :maxlength="200" type="textarea" v-model="applyForm.helpHis" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请原因">
                            <el-input :maxlength="200" type="textarea" v-model="applyForm.applyReason" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="申请附件">
                            <file-upload :fileType="[' doc', 'xls', 'ppt', 'txt', 'pdf', 'xlsx', 'png', 'jpg', 'jpeg', 'bmp'
                            ]" v-model="applyForm.applyMaterial"></file-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="申请人签字">
                            <el-upload :before-upload="boolImg" accept="image/jpg,image/jpeg,image/png,image/bmp"
                                :limit="1" class="avatar-uploader" :action="upload.url" :headers="upload.headers"
                                :show-file-list="false" :file-list="upload.fileList" :on-success="handleAvatarSuccess">
                                <img v-if="applyForm.applySign" :src="baseurl + applyForm.applySign" width="200px"
                                    height="50px" class="avatar">
                                <span v-else> 点击上传</span>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button size="mini" type="primary" plain @click="doSave">保存</el-button>
                        <el-button size="mini" type="success" plain @click="doApply">提交</el-button>
                        <span style="color:red">*只有当前学年通过困难认定才能申请岗位</span>
                    </el-col>

                </el-row>

            </el-form>
        </el-dialog>


    </div>
</template>
<script>

import { getOwnSign, listHall as listOwnApply } from "@/api/workstudy/post";

import { CheckImgExists, boolImg, fullLoading, isEmpty } from "@/api/helpFunc";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


import TeacherSelect from '@/views/components/TeacherSelect/index';

import { getOwnInfo } from "@/api/stuCQS/basedata/student";

import { getOwnLog } from "@/api/dormitory/new/stuDom";

import {
    getOwnInfo as getExtraInfo
} from "@/api/stuCQS/basedata/extraInfo";

import { getToken } from "@/utils/auth";


import { doApply, doSave } from "@/api/workstudy/stuPost";

import { alipayVali } from "@/api/helpFunc/bank";



export default {
    name: "workstudy-apply",
    components: { Treeselect, TeacherSelect },
    dicts: ['qgzx_apply_status'],
    data() {
        return {
            boolImg,
            isEmpty,
            loading: false,
            total: 0,
            tableData: [],

            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postName: null,
            },

            lookV: false,
            lookForm: {},


            baseurl: process.env.VUE_APP_BASE_API + "/",


            applyForm: {
                idCard: "",
                bankCard: "",
                bankAddr: "",
                applySign: "",
                familyAddr: "",
                stuDorm: ""
            },
                
                        
            upload: {
                headers: { Authorization: "Bearer " + getToken() },
                url: process.env.VUE_APP_BASE_API + "/common/upload",
                fileList: []
            },
            baseurl: process.env.VUE_APP_BASE_API + "/",

        }

    },
    async created() {
        
        this.getList();

    },
    methods: {
        //此方法用于判断步骤条当前步骤的状态
        getStepStatus(data) {
            if (data == "同意") {
                return 'success';
            } else {
                return 'error';
            }
        },

        //此方法用于判断步骤条到哪个步骤了
        getStep(data) {
            if (!isEmpty(data.highCmt)) { //判断资助办领导有没有审批
                return 3;
            } else if (!isEmpty(data.deptCmt)) { //判断部门领导有没有审批
                return 2;
            } else {
                return 1;
            }
        },
        async doSave() {
            let sdata = { ...this.applyForm };
            if (isEmpty(sdata.idCard)) {
                this.$message.info("请填写身份证号");
                return;
            }
            if (isEmpty(sdata.bankCard)) {
                this.$message.info("请填写农行卡号");
                return;
            }
            if (isEmpty(sdata.bankAddr)) {
                this.$message.info("请填写开户行");
                return;
            }
            if (isEmpty(sdata.stuPhone)) {
                this.$message.info("请填写联系电话");
                return;
            }
            if (isEmpty(sdata.canTime)) {
                this.$message.info("请填写课余时间");
                return;
            }

            if (sdata.canTime <= 0 || sdata.canTime > 24) {
                this.$message.info("请输入正确的课余时间");
                return;
            }

            if (isEmpty(sdata.familyAddr)) {
                this.$message.info("请填写家庭地址");
                return;
            }

            if (isEmpty(sdata.zdlsNo)) {
                this.$message.info("请选择指导老师");
                return;
            }
            
            if (isEmpty(sdata.stuDorm)) {
                this.$message.info("请填写宿舍");
                return;
            }
            if (isEmpty(sdata.familyCondition)) {
                this.$message.info("请选择家庭经济情况");
                return;
            }
            if (isEmpty(sdata.applyReason)) {
                this.$message.info("请填写申请原因");
                return;
            }
            if (isEmpty(sdata.applySign)) {
                this.$message.info("请上传签字");
                return;
            }

            if (!CheckImgExists(this.baseurl + sdata.applySign)) {
                this.$message.info("签名失效，请重新上传");
                return;
            }

            let card = sdata.bankCard;
            let loading = fullLoading(this);
            let boolCard = await alipayVali(card);
            loading.close();
            if (boolCard.validated == false) {
                this.$message.info("请输入正确的银行卡号");
                return;
            }

            if (boolCard.bank != "ABC") {
                this.$message.info("请输入正确的中国农业银行银行卡号");
                return;
            }

            if (isEmpty(sdata.helpHis)) {
                sdata.helpHis = "无";
            }

            let loading1 = fullLoading(this);
            let res = await doSave(sdata);
            loading1.close();
            if (res.code == 200) {
                this.lookV = false;
                this.$confirm('保存成功，是否前往查看', '提示', {
                    confirmButtonText: '点我前往',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push("/workstudy/stupost/stu")
                }).catch(() => {

                });
            }

        },
        async doApply() {
            let sdata = { ...this.applyForm };
            if (isEmpty(sdata.idCard)) {
                this.$message.info("请填写身份证号");
                return;
            }
            if (isEmpty(sdata.bankCard)) {
                this.$message.info("请填写农行卡号");
                return;
            }
            if (isEmpty(sdata.bankAddr)) {
                this.$message.info("请填写开户行");
                return;
            }
            if (isEmpty(sdata.stuPhone)) {
                this.$message.info("请填写联系电话");
                return;
            }
            if (isEmpty(sdata.canTime)) {
                this.$message.info("请填写课余时间");
                return;
            }

            if (sdata.canTime <= 0 || sdata.canTime > 24) {
                this.$message.info("请输入正确的课余时间");
                return;
            }

            if (isEmpty(sdata.familyAddr)) {
                this.$message.info("请填写家庭地址");
                return;
            }

            if (isEmpty(sdata.zdlsNo)) {
                this.$message.info("请选择指导老师");
                return;
            }

            if (isEmpty(sdata.stuDorm)) {
                this.$message.info("请填写宿舍");
                return;
            }
            if (isEmpty(sdata.familyCondition)) {
                this.$message.info("请选择家庭经济情况");
                return;
            }
            if (isEmpty(sdata.applyReason)) {
                this.$message.info("请填写申请原因");
                return;
            }
            if (isEmpty(sdata.applySign)) {
                this.$message.info("请上传签字");
                return;
            }

            if (!CheckImgExists(this.baseurl + sdata.applySign)) {
                this.$message.info("签名失效，请重新上传");
                return;
            }

            let card = sdata.bankCard;
            let loading = fullLoading(this);
            let boolCard = await alipayVali(card);
            loading.close();
            if (boolCard.validated == false) {
                this.$message.info("请输入正确的银行卡号");
                return;
            }

            if (boolCard.bank != "ABC") {
                this.$message.info("请输入正确的中国农业银行银行卡号");
                return;
            }

            if (isEmpty(sdata.helpHis)) {
                sdata.helpHis = "无";
            }

            let loading1 = fullLoading(this);
            let res = await doApply(sdata);
            loading1.close();
            if (res.code == 200) {
                this.lookV = false;
                this.$confirm('申请成功，是否前往查看', '提示', {
                    confirmButtonText: '点我前往',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push("/workstudy/stupost/stu")
                }).catch(() => {

                });
            }
        },

        handleAvatarSuccess(response, file, fileList) {
            this.applyForm.applySign = response.fileName;
            this.upload.fileList = [];
            this.$forceUpdate();
        },

        async getExtraInfo() {
            let res = await getExtraInfo();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    this.applyForm.familyAddr = res.data.xxlxdz;
                }
            }
        },
        async getOwnLog() {
            let res = await getOwnLog();
            if (res.code == 200) {
                console.log(res);
                let data = { ...res.data };
                if (data.dormStu != null) {
                    let temp2 = { ...data.dormStu };
                    this.applyForm.stuDorm = temp2.campusName + " " + temp2.parkName + " " + temp2.buildingName + " " + temp2.floorName + "层" + temp2.roomNo;
                }
            }
        },
        async getOwnInfo() {
            let bool = false;
            let loading = fullLoading(this);
            let res = await getOwnInfo();
            loading.close();
            if (res.code == 200) {
                let data = { ...res.data };
                if (isEmpty(data.xhk) || isEmpty(data.bankAddr) || isEmpty(data.idCard)) {
                    this.$alert('您的信息未完善', '请完善信息', {
                        confirmButtonText: '点我前往完善',
                        callback: action => {
                            this.$router.push("/basedata/stuOwnInfo/edit")
                        }
                    });
                    return false;
                }

                this.applyForm.idCard = data.idCard;
                this.applyForm.bankCard = data.xhk;
                this.applyForm.bankAddr = data.bankAddr;
                this.applyForm.stuPhone = data.phone;
                bool = true;
            }
            return bool;
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        async lookVClick(row) {
            this.getOwnLog();
            this.getExtraInfo();
            let bool = await this.getOwnInfo();
            if (bool) {
                let loading = fullLoading(this);
                let res = await getOwnSign();
                loading.close();
                if (res.code == 200) {
                    let data = { ...res.data };
                    if (isEmpty(data.signature)) {
                        this.$confirm('您的签名尚未上传', '提示', {
                            confirmButtonText: '点我前往',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/user/profile")
                        }).catch(() => {

                        });
                    } else {
                        this.applyForm.postId = row.id;
                        this.applyForm.applySign = data.signature;
                        this.lookForm = {};
                        this.lookForm = { ...row };
                        this.lookV = true;
                    }
                }
            }

        },

        async getList() {
            this.loading = true;
            let res = await listOwnApply(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.tableData = [...res.rows];
                this.total = res.total;
            }
        },

        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children,
            };
        }
    }
}


</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}

.card-item {
    border-bottom: 1px dotted lightblue;
    font-size: 13px;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
}

.item {}
</style>